<% content_for(:title, "Components: Alerts") %>

<%= render layout: "layout", locals: { wrapper: false } do %>
  <div class="grid">
    <%= container do |c| %>
      <% c.sidebar class: "order-first" do %>
        <h2>Flash messages</h2>
        <p>These alert types are generated internally by Trestle within resourceful admins.</p>
      <% end %>

      <%= render "trestle/flash/alert", html_class: "alert-success",
                                        icon: icon("alert-icon far fa-check-circle"),
                                        alert: {
                                          title: admin.t("flash.create.success.title"),
                                          message: admin.t("flash.create.success.message",
                                          lowercase_model_name: "resource")
                                        } %>

      <%= render "trestle/flash/alert", html_class: "alert-danger",
                                        icon: icon("alert-icon far fa-times-circle"),
                                        alert: {
                                          title: admin.t("flash.create.failure.title"),
                                          message: admin.t("flash.create.failure.message",
                                          lowercase_model_name: "resource")
                                        } %>

      <%= render "trestle/flash/alert", html_class: "alert-danger",
                                        icon: icon("alert-icon far fa-times-circle"),
                                        alert: {
                                          title: admin.t("flash.create.failure.title"),
                                          message: admin.t("flash.create.failure.message", lowercase_model_name: "resource")
                                        },
                                        errors: { field: "is required", another: "is already taken" } %>
    <% end %>

    <%= container do |c| %>
      <% c.sidebar class: "order-first" do %>
        <h2>Custom alerts</h2>
      <% end %>

      <%= render "trestle/flash/alert", html_class: "alert-primary",
                                        icon: icon("alert-icon fas fa-bell"),
                                        alert: {
                                          title: "Primary",
                                          message: alert_message(".alert-primary")
                                        } %>

      <%= render "trestle/flash/alert", html_class: "alert-secondary",
                                        icon: icon("alert-icon fas fa-download"),
                                        alert: {
                                          title: "Secondary",
                                          message: alert_message(".alert-secondary")
                                        } %>

      <%= render "trestle/flash/alert", html_class: "alert-info",
                                        icon: icon("alert-icon fas fa-exclamation"),
                                        alert: {
                                          title: "Info",
                                          message: alert_message(".alert-info")
                                        } %>

      <%= render "trestle/flash/alert", html_class: "alert-warning",
                                        icon: icon("alert-icon fas fa-radiation-alt"),
                                        alert: {
                                          title: "Warning",
                                          message: alert_message(".alert-warning")
                                        } %>

      <%= render "trestle/flash/alert", html_class: "alert-light",
                                        icon: icon("alert-icon fas fa-sun"),
                                        alert: {
                                          title: "Light",
                                          message: alert_message(".alert-light")
                                        } %>

      <%= render "trestle/flash/alert", html_class: "alert-dark",
                                        icon: icon("alert-icon far fa-moon"),
                                        alert: {
                                          title: "Dark",
                                          message: alert_message(".alert-dark")
                                        } %>
    <% end %>
  </div>
<% end %>
